<template>
	<view class="detailPage">
		<!-- 发布机构、浏览数 -->
		<view class="header">
			<!-- 发布机构 -->
			<text class="mechanism">{{mechanism || '南宁统战部'}} </text>
			<text class="browse">{{num}} 浏览</text>
		</view>

		<!-- 标题 -->
		<view class="title">南宁市委统战部到良庆区调研侨务和海外统战工作</view>

		<!-- 商品详情信息(注意:图片空白间隙问题) -->
		<rich-text class="content" :nodes="content"></rich-text>

		<!-- 没有更多,分享好友,分享链接 -->
		<view class="aside">
			<text class="more">- 没有更多了，分享一下吧！-</text>
			<button class="wechat">分享好友 <image src="/static/wechat.png"></image></button>
			<button class="moments">分享链接 <image src="/static/wechatmoments.png"></image></button>
		</view>

		<!-- 上一篇 -->
		<view class="prev">
			<text class="txt">【学习贯彻中央统战工作会议精神】市委统战部召开部务（扩大）会议 学习...</text>
			<text>上一篇</text>
			<text class="browse">1619 浏览</text>
		</view>
		<!-- 下一篇 -->
		<view class="next">
			<text class="txt">【学习贯彻中央统战工作会议精神】市委统战部召开部务（扩大）会议 学习...</text>
			<text>下一篇</text>
			<text class="browse">1619 浏览</text>
		</view>

		<!-- 收藏、点赞 -->
		<view class="footer">
			<view class="collection">
				<text class="icon">&#xe8b9;</text>
				<text>收藏</text>
			</view>

			<view class="fabulous">
				<text class="icon">&#xec7f;</text>
				<text>{{fabulous}}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from "@dcloudio/uni-app"
	import { getCurrentInstance, ref } from "vue"
	// 全局引入
	let { appContext } = getCurrentInstance();
	let { $http } = appContext.config.globalProperties;
	// 调用全局引入的函数

	const Request = new $http({ url: '/system/testacc/release/detail' });

	// 发布机构
	let mechanism = ref("")
	// 浏览数量
	let num = 1024
	// 文本内容
	let content = ref("")
	// 点赞数
	let fabulous = ref(666)

	// 解决图片底部空白间隙问题(将img图片display:设置成block)
	content.value =
		`<p>    8月18日，南宁市委统战部副部长、市台办主任何见霜一行到良庆区调研指导侨务和海外统战工作。良庆区委常委、统战部部长黄均梅陪同调研。</p><p>    何见霜副部长一行实地考察了设立在广西南宁五象企业孵化器有限公司的新侨联谊基地，详细了解基地在孵化侨企、服务侨资侨企、开展联谊交友活动等方面的情况。在中国—东盟新型智慧城市协同创新中心，认真听取了协同创新中心建设情况和入驻企业情况介绍，重点调研企业结合业务工作，开展服务侨务和推进海外统战工作的设想。</p><p><img src="https://nntzback.jyhdkj.com/profile/upload/2022/11/20/1_20221120012009A031.jpg"></p><p>    在组织召开的座谈会上，何见霜副部长肯定了近年来良庆区开展侨务和海外统战工作成效，并就如何推动下一步的侨务和海外统战工作提出了意见建议。何见霜副部长指出，要强化创新不断探索，建立健全海外统战工作新机制，建立侨务和海外统战工作新模式，为华侨、归侨和海外留学归国人员搭建起交流合作、联络交友、文化浸润的平台。要围绕凝聚人心、汇聚力量，打造亮点突出、特色鲜明的侨务、海外统战工作示范基地。要强化线上线下融合，加强网络统战工作，走好网络群众路线，充分利用自贸区的地域优势和政策叠加优势，发挥辐射带动作用，讲好中国故事、广西故事、南宁故事，不断涵养壮大知华友华力量。</p>`
		.replace(/<img /g, "<img style='display:block;width:100%;margin:10px 0px;' ")
	onLoad((option) => {
		console.log("option.title", option?.title)
		let title = "";
		// JSON.parse(decodeURIComponent(option?.title) || '')
		// 当存在标题时，才设置标题头内容
		if (title) uni.setNavigationBarTitle({
			title
		});
		// 获取数据
		// getInfor(option?.id)
		// https://nntzback.jyhdkj.com/system/testacc/release/detail?info_id=3&token=true
		// https://nntzback.jyhdkj.com/system/testacc/release/detail?info_id=3&token=true
		// https://nntzback.jyhdkj.com/system/testacc/release/list/type?info_type=1
	})

	// 发送请求获取内容数据
	let getInfor = async (info_id = "3") => {
		// https://nntzback.jyhdkj.com/system/testacc/release/detail?info_id=3&token=true
		let res = await Request?.get({
			data: {
				info_id,
				"token": "true"
			}
		})
		if (res.code != 200) return console.error("请求失败了")

		console.log("res", res.data)
	}
</script>

<style lang="scss" scoped>
	.detailPage {
		min-height: inherit;
		display: flex;
		flex-direction: column;
		padding: 70rpx 30rpx 165rpx;
	}

	// 发布机构、浏览数--
	.header {
		font-size: 24rpx;

		.mechanism {
			font-weight: bold;
			margin-right: 50rpx;
		}

		.browse {
			color: #ababab;
		}
	}

	// 发布机构、浏览数==

	.title {
		font-size: 54rpx;
		color: #3b3b3b;
		padding: 30rpx 0;
		line-height: 87rpx;
	}

	// 内容部分
	.content {
		font-size: 34rpx;
		line-height: 72rpx;
		color: #333;
	}

	// 没有更多,分享好友,分享链接--
	.aside {
		margin: 50rpx 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
		gap: 35rpx 30rpx;
		justify-self: center;

		// 没有更多了吧
		.more {
			font-size: 28rpx;
			color: #888;
			grid-column: 1/-1;
			text-align: center;
		}

		// 设置按钮的样式
		.wechat,
		.moments {
			width: 210rpx;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.1);
			padding: 0 20rpx;
			color: #222;
			font-size: 28rpx;
			border-radius: 40rpx !important;
			overflow: hidden !important;
		}

		// 给两个小图标设置大小
		image {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			overflow: hidden;
		}

		.wechat {
			justify-self: end;
		}

		.moments {
			justify-self: start;
		}
	}

	// 没有更多,分享好友,分享链接==

	.prev,
	.next {
		width: 100%;
		border-radius: 6rpx;
		color: #fff;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-columns: repeat(2, auto);
		padding: 40rpx 20rpx;
		gap: 20rpx;
		background-color: rgba(0, 0, 0, 0.4);
		position: relative;

		&:before {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: transparent url("https://www.imahui.com/uploads/2017/07/1536490630-office.jpg") no-repeat scroll center center;
			background-size: cover;
			border-radius: 6rpx;
			overflow: hidden;
			z-index: -1;
			/*-1 可以当背景*/
			-webkit-filter: blur(1px);
			/* 添加滤镜效果 */
			filter: blur(1px);
		}

		// 标题内容
		>.txt {
			grid-column: 1/-1;
			@include transcendLine(1);
			padding: 0rpx 10rpx;
		}

		// 浏览数
		>.browse {
			justify-self: end;
		}
	}

	// 上一篇
	.prev {
		margin-bottom: 30rpx;
	}

	// 下一篇
	.next {
		margin-bottom: 60rpx;
	}

	// 收藏、点赞--
	// 使用粘性布局粘在底部
	.footer {
		height: 165rpx;
		padding: 24rpx 20rpx 0rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		box-shadow: 0 2px 10px 0 rgba(155, 161, 168, 0.3);
		display: flex;

		>view {
			width: 96rpx;
			height: 84rpx;
			font-family: "iconfont";
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #6c788e;
		}

		.icon {
			font-size: 40rpx;
		}

		.fabulous {}

		.collection {}
	}

	// 收藏、点赞==
</style>
